<template>
  <div class="user-center">
    <div class="p-relative">
      <div class="display-flex p-absolute mt-112 fill-width align-center" @click="goUserList">
        <span class="user-avatar ml-36">
          <van-image :src="userInfo.avatar" fit="cover" class="avatar-icon"/>
        </span>
        <div class="ml-36 mr-36 flex-item font-white">
          <div class="display-flex justify-between align-center">
            <span class="font-size-55 ">{{ userInfo.nickName }}</span>
            <van-image :src="rightArrowIcon" fit="contain" class="right-arrow-icon" v-if="userListLen > 1"/>
          </div>
          <div class="display-flex mt-20 align-center">
            <span class="font-size-26">{{ userInfo.shopName }}</span>
            <div class="display-flex align-center auth-size">
              <van-image :src="companyIcon" fit="contain" class="company-icon"/>
              <span class="font-size-16">已认证</span>
            </div>
          </div>
        </div>
      </div>
      <van-image :src="topBgIcon" class="z-index--1 top-bg-icon"/>
    </div>
    <div class="pl-35 pr-35 bg-white user-center-content">
      <div class="text-bold font-size-30 font-black pt-54 pb-54">我的云仓</div>
      <div class="display-flex justify-between flex-wrap fill-width">
        <div class="display-flex justify-center align-center item-size bg-F1F9FF" @click="goWarehouseIn" v-hasPermi="['zhcloud:hwrc:list']">
          <van-image :src="warehouseInIcon" fit="contain" class="warehouse-in-icon"/>
          <span class="font-size-32 font-black ml-16">我的进仓</span>
        </div>
        <div class="display-flex justify-center align-center item-size bg-F0FCEB pull-right" @click="goWarehouseOut" v-hasPermi="['zhcloud:hwcc:list']">
          <van-image :src="warehouseOutIcon" fit="contain" class="warehouse-out-icon"/>
          <span class="font-size-32 font-black ml-16">我的出仓</span>
        </div>
         <div class="display-flex justify-center align-center item-size bg-f2f2f2 mt-30" @click="goChangeCar" v-hasPermi="['zhcloud:changeCar:list']">
          <van-image :src="changeCarIcon" fit="contain" class="change-car-icon"/>
          <span class="font-size-32 font-black ml-16">出仓过车</span>
        </div>
      </div>
    </div>
    <div class="user-center-service">
      <a class="display-inline" href="tel:400-9909-323">
        <van-image :src="serviceIcon" fit="contain" class="service-icon display-block"/>
        <span class="font-size-26 font-black">客服热线</span>
      </a>
    </div>
  </div>
</template>
<script setup lang="ts">
import companyIcon from '@/assets/images/home/company.png'
import rightArrowIcon from '@/assets/images/home/right_arrow.png'
import serviceIcon from '@/assets/images/home/service.png'
import topBgIcon from '@/assets/images/home/top_bg.png'
import warehouseInIcon from '@/assets/images/home/warehouse_in.png'
import warehouseOutIcon from '@/assets/images/home/warehouse_out.png'
import changeCarIcon from '@/assets/images/home/change_car.png'
import { useRouter, useRoute } from 'vue-router'
import { getLocalStorage } from '@/utils/localStorage'

const router = useRouter()
let userInfo: any = getLocalStorage('userInfo')
const userListLen: any = getLocalStorage('userListLen')

function goWarehouseIn() {
  router.push({path:'/warehouseIn'})
}

function goWarehouseOut() {
  router.push({path:'/warehouseOut'})
}

function goChangeCar() {
  router.push({path:'/changeCar'})
}

function goUserList() {
  if(userListLen > 1) {
    router.push({path:'/userCenter/userList', query:{userName:userInfo.userName}})
  }
}
</script>
<style lang="scss" scoped>
  .user-center {
    position:fixed;
    top:0;
    bottom:0;
    background:#fff;
    .top-bg-icon {
      width:750px;
      height: 431px;
    }
    .user-avatar {
      width:132px;
      height:132px;
      border-radius:80px;
      border:4px solid #fff;
      overflow:hidden;
      .avatar-icon {
        width:133px;
        height:133px;
      }
    }
    .right-arrow-icon {
      width: 14px;
      height: 24px;
    }
    .company-icon {
      width: 16px;
      height: 17px;
      margin:0 6px 0 12px;
    }
    .auth-size {
      width:100px;
      height:30px;
      line-height:30px;
      background-color:rgba(225,225,225,0.2);
      margin-left:19px;
      border-radius:4px;
    }
    .item-size {
      width:327px;
      height:157px;
    }

    &-content {
      margin-top:-76px;
      border-top-left-radius: 38px;
      border-top-right-radius: 38px;
      z-index:2;
      .warehouse-in-icon {
        width:49px;
        height:42px;
      }
      .warehouse-out-icon {
        width:45px;
        height:36px;
      }
      .change-car-icon {
        width:50px;
        height:50px;
      }
    }
    
    &-service {
      position:fixed;
      bottom:70px;
      text-align:center;
      margin:0 auto;
      width:100%;
      .service-icon {
        width:73px;
        height:73px;
        margin:0 auto;
      }
    }
  }
</style>
